<template>
  <div class="login">
    <!-- 登入框 -->
    <div class="login-box">
      <h3>超级外卖后台管理系统</h3>
      <!-- 表单验证 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item prop="uname">
          <el-input
            type="text"
            v-model="ruleForm.uname"
            autocomplete="off"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="ruleForm.pass"
            autocomplete="off"
            @keyup.native.13="submitForm('ruleForm')"
            prefix-icon="iconfont icon-mima"
          >
            <i
              @click="flag = !flag"
              slot="suffix"
              class="iconfont"
              :class="flag ? 'icon-eyes' : 'icon-eyes-'"
            ></i
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="loading"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
import loca from '@/utils/loca.js'
export default {
  data() {
    var validateUname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        uname: '',
        pass: ''
      },
      rules: {
        uname: [{ validator: validateUname, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }]
      },
      flag: true,
      loading: false
    }
  },
  methods: {
    submitForm(formName) {
      this.loading = true
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // 登入成功
          const data = await login({
            account: this.ruleForm.uname,
            password: this.ruleForm.pass
          })
          // 根据 code 和 msg 使用 element-ui 提供的 $message 方法提示
          const { code, msg, token } = data
          loca.set('token', token)
          if (code === 0) {
            this.$message({
              type: 'success',
              message: msg
            })
            setTimeout(() => {
              this.$router.push('/')
            }, 1500)
          } else {
            this.$message.error(msg)
            setTimeout(() => {
              this.loading = false
            }, 1000)
          }
        } else {
          // 登入失败
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    width: 360px;
    height: 220px;
    background-color: #2d3a4b;

    h3 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      padding: 5px;
      letter-spacing: 5px;
      color: #fff;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
